<template>
  <div class="app-container">
    <div style="margin-bottom: 10px;">
      <el-button type="primary" icon="el-icon-edit" size="small" @click="editMenu(0)">添加菜单</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      row-key="id"
      :default-expand-all="true"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="菜单标题">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="类型">
        <template slot-scope="scope">
          <span v-if="scope.row.type === 1">菜单</span>
          <span v-else-if="scope.row.type === 2">权限</span>
        </template>
      </el-table-column>
      <el-table-column label="菜单类型">
        <template slot-scope="scope">
          <div v-if="scope.row.type === 1">
            <div v-if="scope.row.menu_type === 1">目录</div>
            <div v-else-if="scope.row.menu_type === 2">菜单</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="菜单图标">
        <template slot-scope="scope">
          <div v-if="scope.row.icon">
            <i v-if="scope.row.icon.includes('el-icon')" :class="scope.row.icon" />
            <svg-icon v-if="!scope.row.icon.includes('el-icon')" :icon-class="scope.row.icon" />
            {{ scope.row.icon }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="菜单name">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="component">
        <template slot-scope="scope">
          {{ scope.row.component }}
        </template>
      </el-table-column>
      <el-table-column label="是否显示">
        <template slot-scope="scope">
          {{ scope.row.isshow === 1 ? '显示':'隐藏' }}
        </template>
      </el-table-column>
      <el-table-column label="path">
        <template slot-scope="scope">
          {{ scope.row.path }}
        </template>
      </el-table-column>
      <el-table-column label="排序">
        <template slot-scope="scope">
          {{ scope.row.sort }}
        </template>
      </el-table-column>
      <el-table-column label="扩展数据">
        <template slot-scope="scope">
          {{ scope.row.more }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editMenu(scope.row.id)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" @click="delMenu(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="dialogFormTitle" :visible.sync="dialogFormVisible" top="5vh" @closed="closeDialog('diaform')">
      <el-form ref="diaform" :model="form" :rules="rules">
        <el-form-item label="上级菜单" :label-width="formLabelWidth">
          <el-cascader
            v-model="parentMenu"
            :options="allMenus"
            :props="{ checkStrictly: true, value: 'id', label: 'title' }"
            placeholder="选择上级菜单"
            :clearable="true"
          />
          <el-link disabled style="margin-left: 10px;">顶级目录无需选择</el-link>
        </el-form-item>
        <el-form-item label="标题" prop="title" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-radio v-model="form.type" :label="1 * 1">前端菜单</el-radio>
          <el-radio v-model="form.type" :label="2 * 1">后台权限</el-radio>
        </el-form-item>
        <el-form-item label="菜单类型" :label-width="formLabelWidth">
          <el-radio v-model="form.menu_type" :label="1 * 1">目录</el-radio>
          <el-radio v-model="form.menu_type" :label="2 * 1">菜单</el-radio>
        </el-form-item>
        <el-form-item label="菜单图标" :label-width="formLabelWidth">
          <el-input v-model="form.icon" autocomplete="off" />
        </el-form-item>
        <el-form-item label="name" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="component" :label-width="formLabelWidth">
          <el-input v-model="form.component" autocomplete="off" />
        </el-form-item>
        <el-form-item label="path" :label-width="formLabelWidth">
          <el-input v-model="form.path" autocomplete="off" />
        </el-form-item>
        <el-form-item label="排序(小->大)" :label-width="formLabelWidth">
          <el-input-number v-model="form.sort" :min="0" :max="999999" />
        </el-form-item>
        <el-form-item label="是否显示" :label-width="formLabelWidth">
          <el-radio v-model="form.isshow" :label="1 * 1">显示</el-radio>
          <el-radio v-model="form.isshow" :label="0 * 1">隐藏</el-radio>
        </el-form-item>
        <el-form-item label="扩展字段" :label-width="formLabelWidth">
          <el-input v-model="form.more" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :loading="btnloading" @click="submitForm('diaform')">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getAllMenu, getMenuDetail, postMenu, delMenu } from '@/api/system'

const initForm = () => {
  return {
    id: 0,
    name: '',
    pid: 0,
    type: 1,
    menu_type: 1,
    title: '',
    icon: '',
    component: '',
    isshow: 1,
    path: '',
    sort: 0,
    more: ''
  }
}
export default {
  data() {
    return {
      list: [],
      listLoading: true,
      dialogFormVisible: false,
      dialogFormTitle: '添加',
      form: initForm(),
      parentMenu: [],
      formLabelWidth: '120px',
      allMenus: [],
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ]
      },
      btnloading: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getAllMenu().then(response => {
        this.list = response.data
        this.listLoading = false
        this.allMenus = response.data
      })
    },
    editMenu(id) {
      // 添加/编辑菜单
      if (id) {
        // 编辑
        this.dialogFormTitle = '编辑'
        // 加载数据
        this.form.id = id

        getMenuDetail(id).then(succ => {
          // console.log('请求成功', succ)
          this.form = {
            ...this.form,
            ...succ.data
          }
          if (succ.data.pid > 0) {
            this.parentMenu = [succ.data.pid]
          }
          this.dialogFormVisible = true
        }, err => {
          console.log(err)
          // this.dialogFormVisible = false
          // this.form.id = 0
        })
      } else {
        this.dialogFormTitle = '添加'
        this.form = initForm()
        this.dialogFormVisible = true
      }
    },
    submitForm(formName) {
      this.btnloading = true
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 请求接口
          // 处理上级菜单pid
          this.form.pid = 0
          if (this.parentMenu.length > 0) {
            this.form.pid = this.parentMenu[0]
          }
          postMenu(this.form).then(succ => {
            // 更新列表
            this.fetchData()
            this.dialogFormVisible = false
            // if (this.form.type === 1) {
            //   // 修改了菜单,刷新页面
            //   // window.location.reload()
            // } else {
            // }
          }, err => {
            console.log('提交失败', err)
          }).finally(() => {
            this.btnloading = false
          })
        } else {
          this.btnloading = false
          return false
        }
      })
    },
    delMenu(row) {
      // alert('删除菜单' + id)
      console.log(row)
      this.$confirm('确认要删除`' + row.title + '`菜单吗？', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 执行删除
        delMenu(row.id).then(succ => {
          this.fetchData()
          this.$message({
            type: 'success',
            message: succ.msg
          })
        })
      })
    },
    closeDialog(formName) {
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
      this.parentMenu = []
    }
  }
}
</script>
